<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>detail</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script src="/js/jquery-1.12.4.min.js"></script>

</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md3">
            <img id="musicImg" src="" style="width: 200px;height: 200px;float: left;"/>
        </div>
        <div class="layui-col-md9">
            <div id="lyric"></div>
        </div>
    </div>
</div>
<div style="width: 500px;height: auto;padding: 10px;margin: 10px">
    <div style="width: 50px;height: 50px;float: left;display: inline">
    </div>
</div>
<script src="/layui/layui.js" charset="utf-8"></script>
<script>
    $(document).ready(function (){
        $("#musicImg").attr("src","/img/"+localStorage["playingImgPath"]);
        $.ajax({
            url:'/lyric/'+localStorage["playingId"],
            method:'get',
            dataType:'JSON',
            contentType: "application/json;charset=utf-8",
            success:function(res){
                if(res.code==0){
                    console.log(1);
                    $("#lyric").html(res.lyric);
                }
                else
                    layer.alert("错误");
            }
        })

        window.addEventListener('storage', function (e){
            //layui.$("#audioPlayer").attr("src","http://172.26.63.130:8080"+"/mp3/"+data.musicPath);
            if(true){
                var data = e.newValue;
                console.log(data);
                if(e.key === "playingId"){
                    $$.ajax({
                        url:'/lyric/'+localStorage["playingId"],
                        method:'get',
                        dataType:'JSON',
                        contentType: "application/json;charset=utf-8",
                        success:function(res){
                            if(res.code==0){
                                console.log(1);
                                $("#lyric").html(res.lyric);
                            }
                            else
                                layer.alert("错误");
                        }
                    })
                }
                else if(e.key === "playingImgPath"){
                    $("#musicImg").attr("src","/img/"+data);
                }
                else if(e.key === "playingName"){
                    alert(e.newValue);
                    $("#songName").html(data);
                }
                else if(e.key === "playingSinger"){
                    $("#singerName").html(data);
                }
            }

            //alert(e.key+":"+e.oldValue+"->"+e.newValue+"."+e.url)
            //console.log(e.key+":"+e.oldValue+"->"+e.newValue+"."+e.url);
        })
    })
</script>
</body>
</html>